<template>
  <f7-page>
    <f7-navbar title="Swiper Slider" back-link="Back"></f7-navbar>
    <div class="block">
      <p>
        Framework7 comes with powerful and most modern touch slider ever -
        <a href="https://swiperjs.com" class="external" target="_blank">Swiper Slider</a>
        with super flexible configuration and lot, lot of features. Just check the following demos:
      </p>
    </div>
    <div class="list links-list">
      <ul>
        <li>
          <a href="/business/demo/swiper-horizontal/">Swiper Horizontal</a>
        </li>
        <li>
          <a href="/business/demo/swiper-vertical/">Swiper Vertical</a>
        </li>
        <li>
          <a href="/business/demo/swiper-space-between/">Space Between Slides</a>
        </li>
        <li>
          <a href="/business/demo/swiper-multiple/">Multiple Per Page</a>
        </li>
        <li>
          <a href="/business/demo/swiper-nested/">Nested Swipers</a>
        </li>
        <li>
          <a href="/business/demo/swiper-loop/">Infinite Loop Mode</a>
        </li>
        <li>
          <a href="/business/demo/swiper-3d-cube/">3D Cube Effect</a>
        </li>
        <li>
          <a href="/business/demo/swiper-3d-coverflow/">3D Coverflow Effect</a>
        </li>
        <li>
          <a href="/business/demo/swiper-3d-flip/">3D Flip Effect</a>
        </li>
        <li>
          <a href="/business/demo/swiper-fade/">Fade Effect</a>
        </li>
        <li>
          <a href="/business/demo/swiper-scrollbar/">With Scrollbar</a>
        </li>
        <li>
          <a href="/business/demo/swiper-gallery/">Thumbs Gallery</a>
        </li>
        <li>
          <a href="/business/demo/swiper-custom-controls/">Custom Controls</a>
        </li>
        <li>
          <a href="/business/demo/swiper-parallax/">Parallax</a>
        </li>
        <li>
          <a href="/business/demo/swiper-lazy/">Lazy Loading</a>
        </li>
        <li>
          <a href="/business/demo/swiper-pagination-progress/">Progress Pagination</a>
        </li>
        <li>
          <a href="/business/demo/swiper-pagination-fraction/">Fraction Pagination</a>
        </li>
        <li>
          <a href="/business/demo/swiper-zoom/">Zoom</a>
        </li>
      </ul>
    </div>
  </f7-page>
</template>
<script>
  import { f7Navbar, f7Page } from 'framework7-vue';

  export default {
    components: {
      f7Navbar,
      f7Page,
    },
  };
</script>
